<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!--文章静态-->
    <div>
      <div id="article">
        <div class="nav nav-bgimage" v-if="datas.list && (datas.get_style == 1 || datas.get_style == 3) && datas.show_tab">
          <div class="nav-li nav-selected" v-if="datas.get_style == 1">
            <div class="nav-lis">全部</div>
          </div>
          <div class="nav-li nav-selected" v-if="datas.get_style == 3">
            <div class="nav-lis">分类1</div>
          </div>
          <div class="nav-li">
            <div class="nav-lis">分类2</div>
          </div>
          <div class="nav-li">
            <div class="nav-lis">分类3</div>
          </div>
        </div>
        <template v-if="datas.list && (datas.get_style == 1 || datas.get_style == 3)">
          <div class="article-list" v-for="(item, index) in 3" :key="index">
            <!-- 样式一图片 -->
            <div v-if="datas.article_style == 1" class="image-style1">
              <img :src="emptyImage" alt=""/>
              <div class="article_audio_play" v-if="index == 2 && datas.show_audio"><i class="iconfont icon-fontclass-bofang1"></i></div>
            </div>
            <div class="content" >
              
              <div class="title">
                文章标题
              </div>
              <div class="audio-message message" v-if="index == 2 && datas.show_audio">
                <!-- 音频 -->
                <div class="time"><i class="iconfont icon-fontclass-bofang1"></i>播放数量</div>
                <div class="time"><i class="iconfont icon-seller-time"></i>音频时长</div>
                <div class="time"><i class="iconfont icon-zb_share"></i>分享</div>
              </div>
              <div class="message" v-else>
                <!-- 普通文章 -->
                <div class="author">文章作者</div>
                <div class="time">2020-xx-xx hh:mm:ss</div>
              </div>
            </div>
            <!-- 样式二图片 -->
            <div v-if="datas.article_style == 2" class="image-style2">
              <img :src="emptyImage" alt=""/>
              <div class="article_audio_play" v-if="index == 2 && datas.show_audio"><i class="iconfont icon-fontclass-bofang1"></i></div>
            </div>
          </div>
        </template>
        <template v-if="datas.list && datas.get_style == 2">
          <div class="article-list" v-for="(item, index) in datas.list" :key="item.id">
            <!-- 样式一图片 -->
            <div v-if="datas.article_style == 1" class="image-style1">
              <img :src="item.thumb || emptyImage" alt=""/>
              <div class="article_audio_play" v-if="index == 2 && datas.show_audio"><i class="iconfont icon-fontclass-bofang1"></i></div>
            </div>
            <div class="content">
              <div class="title">
                {{item.title}}
              </div>
              <div class="message" v-if="Number(item.type) != 1">
                <!-- 普通文章 -->
                <div class="author">文章作者</div>
                <div class="time">2020-xx-xx hh:mm:ss</div>
              </div>
              <div class="audio-message message" v-if="Number(item.type) == 1">
                <!-- 音频 -->
                <div class="audio-cell"><i class="iconfont icon-fontclass-bofang1"></i>播放数量</div>
                <div class="audio-cell"><i class="iconfont icon-seller-time"></i>音频时长</div>
                <div class="audio-cell"><i class="iconfont icon-zb_share"></i>分享</div>
              </div>
            </div>
            <!-- 样式二图片 -->
            <div v-if="datas.article_style == 2" class="image-style2">
              <img :src="item.thumb || emptyImage" alt=""/>
              <div class="article_audio_play" v-if="index == 2 && datas.show_audio"><i class="iconfont icon-fontclass-bofang1"></i></div>
            </div>
          </div>
        </template>

        <div v-if="datas.list && datas.list.length <= 0 && datas.get_style == 2" style="padding: 15px;text-align: center">
          暂无设置文章
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
	// 自定义样式
	const css = function () {

		if(this.datas.article_bg) {
			// 确保数据已传入
			const {
				article_bg,
				article_tab_bg,
				title_color,
				title_active_color,
				text_size,
				margin_top,
				margin_bottom,
				margin_left,
				margin_right,
				box_radius
			} = this.datas;

			return `
        .component-${this.id} .article-list {
            background-color: ${article_bg};
            margin-top: ${margin_top}px;
            margin-bottom: ${margin_bottom}px;
            margin-left: ${margin_left}px;
            margin-right: ${margin_right}px;
            border-radius: ${box_radius}px;
        }

        .component-${this.id} .article-list .title {
            font-size: ${text_size}px;
            line-height: ${text_size + 2}px;
            height: ${(text_size + 2)*2}px;
        }

        .component-${this.id} .nav-bgimage {
            background-color: ${article_tab_bg};
        }

        .component-${this.id} .nav-li {
            color: ${title_color};
        }

        .component-${this.id} .nav-li.nav-selected {
            color: ${title_active_color};
            border-bottom: solid  2px ${title_active_color };
        }
    `;
    }

	};

	export default {
		data() {
			return {
				emptyImage
			};
		},
		props: ["id", "datas", "styles"],
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},

		methods: {},

		mounted() {
			this.$emit("loaded");
      console.log(this.datas.list)
		},
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  #article {
    .nav {
      display: flex;
      align-items: center;
      height: 40px;
      white-space: nowrap;
      flex-wrap: nowrap;
      box-sizing: content-box;
      .nav-li {
        flex: 1;
        min-width: 20%;
        text-align: center;
        .nav-lis {
          display: inline-block;
          line-height: 40px;
        }
      }
    }

    .scroll {
      overflow-x: scroll;
    }
    .article-list {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding: 5px 10px;
      height: 93px;
      box-sizing: content-box;
      .image-style1 {
        width: 104px;
        height: 93px;
        border-radius: 7.5px;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .message {
          flex: 1;
          display: flex;
          align-items: flex-end;
          color: #999;
          font-size: 12px;
          .author {
            flex: 1;
            display: inline-block;
            margin-right: 10px;
          }
          .time {
            flex: 1;
            display: inline-block;
          }
        }
        .audio-message{
          .icon-fontclass-bofang1{
            font-size: 12px;
          }
          .audio-cell{
            flex: 0 0 80px;
          }
        }
      }
      .image-style2 {
        width: 104px;
        height: 93px;
        border-radius: 7.5px;
        margin-left: 15px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }
      
    }
  }
</style>
